<template>

  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>公众</el-breadcrumb-item>
      <el-breadcrumb-item>毕业生能力要求一级指标</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="searchForm">

      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="queryInfo.query" placeholder="请输入指标名称或编号" clearable @clear="getUserList"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="" @click="getCourseList" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>






      <el-table :header-cell-style="{background:'#808080',color:'#FFFFFF'}" border stripe :data="List" style="width: 100%">

        <el-table-column prop="fid" label="编号" width="180" align="center">
        </el-table-column>
        <el-table-column prop="findicname" label="指标名称" width="180" align="center">
        </el-table-column>
        <el-table-column prop="findicdes" label="指标描述" width align="center">
        </el-table-column>

        <el-table-column label="二级指标" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="查看二级指标" placement="top-start">
              <el-button  icon="el-icon-tickets" circle @click="showCourse(scope.row.fid,scope.row.findicname)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>


      </el-table>








    </div>

    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[4]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </el-card>

</template>


<script>
  export default {

    created(){
      this.getCourseList();
    },
    data() {
      return {
        queryInfo:{
          query:'',//查询信息
          role:this.$session.get('bull'),
          pageNum:1,
          pageSize:4
        },
        List:[],
        total:0,
        addDialogVisible:false,
        editDialogVisible:false,
        infoDialogVisible:false,

        addForm:{
          findicname:'',
          findicdes:'',
          fid:'',

        },
        editForm:{
          findicdes:'',
        },
        infoForm:{
          courseid:'',
          ord:'',
          coursedata:'',
          coursetime:'',
          goal:'',
          secondindicid:'',
        },
        addFormRules: {
          fid:[
            { required: true, message:'请输入编号', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          findicname: [
            { required: true, message: '请输入指标名', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
          ],

          findicdes:[
            { required: true, message:'请输入描述', trigger: 'blur' },
            { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
          ],

        },

        editFormRules: {
          findicdes: [
            { required: true, message: '请输入描述', trigger: 'blur' },
            { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
          ]
        },
        infoFormRules: {

        },

      }
    },


    methods: {
      async getCourseList () {
        const { data: res } = await this.$http.get("Publics/AllProfesIndicatorOne", { params: this.queryInfo })
        this.List = res.data;
        this.total = res.numbers;
      },

      async showCourse (fid,findicname) {
        this.$session.set("fid",fid);
        this.$session.set("findicname",findicname);
        this.$router.push({path:'/Pub_SubProfession'});
      },


      handleSizeChange (newSize) {
        this.queryInfo.pageSize = newSize;
        this.getCourseList();
      },
      handleCurrentChange (newPage) {
        this.queryInfo.pageNum = newPage;
        this.getCourseList();
      },
      addDialogClose () {
        this.$refs.addFormRef.resetFields();
      },
      editDialogClose () {
        this.$refs.editFormRef.resetFields();
      },
    }
  }
</script>




<style scoped>
  .searchForm{
    margin-top: 40px;
  }
</style>
